<template>
	<div class="wrap">
		<div class="root">
			<el-row>
				<el-col :span="14" :xs="{ span: 10 }" class="left">
					<video src="../assets/video/video.mp4" muted loop autoplay></video>
				</el-col>
				<el-col :span="10" :xs="{ span: 14 }" class="right">
					<h1>欢迎进入</h1>
					<div class="sign">
						<span class="line"></span>
						<span>用户登录</span>
						<span class="line"></span>
					</div>
					<el-form :model="form" :rules="rules" ref="formRef" class="w-[200px]">
						<el-form-item prop="username" class="my-8">
							<el-input v-model="form.username" placeholder="请输入用户名" :prefix-icon="User" type="text" clearable>
							</el-input>
						</el-form-item>
						<el-form-item prop="password" class="my-8">
							<el-input v-model="form.password" placeholder="请输入密码" :prefix-icon="Lock" type="password" show-password>
							</el-input>
						</el-form-item>
						<el-form-item>
							<el-button class="btn" type="primary" @click="onSubmit" :loading="loading">登录</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { toast } from '~/composables/util'

const router = useRouter()
const store = useStore()

// 简单数据类型采用 ref, 引用数据类型采用 reactive
const form = reactive({
	username: "",
	password: ""
})

const rules = {
	username: [
		{
			required: true,
			message: '用户名不能为空',
			trigger: 'blur' // 触发器
		},
	],
	password: [
		{
			required: true,
			message: '密码不能为空',
			trigger: 'blur'	// 触发器
		}
	]
}

const loading = ref(false)
const formRef = ref(null)

const onSubmit = () => {
	formRef.value.validate((valid) => {
		if (!valid) {
			return false
		}
		loading.value = true
		store.dispatch("login", form).then(res => {
			toast("登录成功")
			router.push("/")
		}).finally(() => {
			loading.value = false
		})
	})
}

// @keyup.enter.native="onSubmit"
// 监听回车事件
function onKeyUp(e) {
	if (e.key == "Enter") onSubmit()
}

// 添加键盘监听事件
onMounted(() => {
	document.addEventListener("keyup", onKeyUp)
});

// 移除键盘监听事件
onBeforeUnmount(()=>{
	document.removeEventListener('keyup', onKeyUp)
});
// 钩子函数的分号不能少

</script>

<style scoped>

* {
	margin: 0;
	padding: 0;
	/* 设置的边框和内边距的值是包含在 width 内的 */
	/* width = border + padding + 内容的宽度 */
	/* height = border + padding + 内容的宽度 */
	box-sizing: border-box;
}

body {
	/* flex 溢出部分隐藏 */
	overflow: hidden;
}

.wrap {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(to left top, #d16ba5, #c777b9, #ba83ca,
			#aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
}

.root {
	width: 880px;
	height: 480px;
	display: flex;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}

@media (max-width: 900px) {
	.root {
		width: 70%;
		height: 70%;
	}
}

.left video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.right {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
}

h1 {
	font-size: 36px;
	color: #70b4e3;
	font-weight: 400;
	margin-bottom: 20px;
	justify-content: center;
	align-items: center;
}

.sign {
	@apply flex items-center justify-center mt-2 text-gray-600 font-medium font-serif space-x-3 text-lg;
}

.line {
	@apply h-[1px] w-16 bg-dark-300;
}

.btn {
	width: 100%;
	height: 40px;
	border-radius: 20px;
	margin-bottom: 40px;
	border: none;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	background-image: linear-gradient(120deg, #76daec 0%, #c5a8de 100%);
}

.btn:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
</style>

